import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '@/components/MusicHall/index/SongList/Banner.scss';
 class Banner extends Component {
    constructor (props) {
        super(props)
        this.state = {}
    }
    render () {
      const list = this.props.list
      // console.log(list)
      return (
        <div className= 'banner-box'>
              <ul className= 'banner-ul'>
              {
                list.map((item, index) =>{
                  // console.log(item)
                  // const playCount = (item.playCount/10000).toFixed(2)
                  // const detailurl = '/musichall/playlist/' +  item.id 
                  // const listurl = '/musichall/portal/' +  item.id
                  
                  // console.log(url)
                  return (
                    <li key={ item.id }>
                        <Link to={'/playerlist/' +  item.id}>
                          <div className='banner_li'>
                            <div className='cover_box'>
                              <i className='iconfont icon-videofill'></i>
                            </div>
                            <img className='banner_img' src= { item.coverImgUrl } alt=''/>
                          </div> 
                        </Link>
                        <Link to={'/playerlist/' +  item.id}>  
                          <p>{item.name}</p>
                        </Link>
                      <span>播放量：{(item.playCount/10000).toFixed(2)}万</span>
                    </li>
                  )
                }) 
              }
              </ul>
        </div>
      )
    }    
 }
 export default Banner